<template>
  <div>
    <HeaderNav :title="$t('m.headernav.PHOTOLIST')" :showBack='true' />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      :offset='10'
      v-model="loading"
      :finished="finished"
      :finished-text="$t('m.msg.MSG6')"
      :error.sync="error"
      :error-text="$t('m.msg.MSG7')"
      @load="getImgList"
      
    >
    <div class="list" >
      <img :src="item" @click='showDetail(item)' v-for="(item, index) in imgList" :key="index" class="img" />
    </div>
    </van-list>
    </van-pull-refresh>

    <van-popup closeable v-model="dialogFlag">
        <div style='padding: 1vh 0;width:90vw;display:flex;align-items: center;justify-content: center;'>
            <img :src="img" style="width: 100%;max-height: 98vh;"/>
        </div>
      </van-popup>
      
  </div>
</template>

<script>
import HeaderNav from '@/components/HeaderNav.vue'
import {postQuery, getQuery, getEmotionHtml} from '@/api/query';
import {
  List,
  PullRefresh,
  Popup
} from 'vant';
export default {
  name: 'UserInfo',
  components: {
    [List.name]: List,
    [Popup.name]: Popup,
    [PullRefresh.name]: PullRefresh,
    HeaderNav
  },
  data(){
    return {
      dialogFlag: false,
      id: 0,//用户id
      page: 1,
      pages: 0,
      loading: false,
      error: false,
      finished: false,
      refreshing: false,
      imgList: [],
      img: ''
    }
  },
  methods: {
    showDetail(img){
      this.img = img
      this.dialogFlag = true
    },
    onRefresh() {
        // 清空列表数据
        this.finished = false;
        //初始化
        this.pages = 0;
        this.imgList = [];
        this.page = 1;
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.getImgList();
      },
    getImgList(){
      let that = this
      let url = '/member/friendCircle/message/image/list';
      let params = {
        pageNumber: that.page
        
      }
      if(that.id == 0){
        params.isMi = true;
      }else{
        url += '/' + that.id;
        params.isMi = false;
      }

      if(that.pages > 0 && that.page > that.pages){
          that.finished = true;
      }
      getQuery(url, params)
        .then (res => {
          if(res.code == 200){
            console.log('list: ',res);
            //如果数据不够finished
            if(res.data.records.length < 10){
              that.finished = true;
            }
            //解析返回结果
            let list = [];
            for(let i = 0; i < res.data.records.length; i ++){
              list = list.concat(res.data.records[i].message.resources);
            }
            that.imgList = that.imgList.concat(list)
            // = res.data.records;
            that.pages = res.data.pages;
            that.page ++;
            that.loading = false;
            that.refreshing = false;

          }else{
            that.$toast.fail(res.msg);
            that.finished = true;
          }
      }).catch(function (error) {
        that.error = true;     
      });
    }
  },
  created(){
    // this.getImgList();
  }
}
</script>
<style scoped>

  .list{
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-around; */
  }
  .img{
    height: 240px;
    margin: 20px 0px 0px 7vw;
    width: 300px;
    object-fit: cover;
  }

  .popup_img{
    width: 80vw;
    /* height: 80vh; */
  }


</style>
